<template>
	<div class="Sort-components">
		<div v-if="data.questionAnswerContent && explain">
			<p class="ques-title">{{ data.questionAnswerContent.question }}</p>
			<draggable v-model="answer" disabled>
				<transition-group>
					<div class="draggable-crad" v-for="item in answer" :key="item.order">
						{{ item.sort }}
					</div>
				</transition-group>
			</draggable>
			<p
				class="ques-title"
				style="font-weight: bold"
				v-show="!data.questionAnswerContent.score"
			>
				正确答案：
				<span
					style="color: #56baca"
					v-for="(item, index) in data.questionAnswerContent.answer"
					:key="index"
					>{{ item.sort }},</span
				>
			</p>
		</div>
		<div v-if="data.content && !explain">
			<p class="ques-title">{{ data.content.question }}</p>
			<draggable v-model="answer">
				<transition-group>
					<div class="draggable-crad" v-for="item in answer" :key="item.order">
						{{ item.sort }}
					</div>
				</transition-group>
			</draggable>
			<slot></slot>
		</div>
	</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
	name: "Sort",
	components: {
		draggable,
	},
	props: {
		data: {
			type: Object,
			default: {},
		},
		explain: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		data: {
			handler(newV, oldV) {
				this.initState();
			},
			deep: true,
		},
	},
	mounted() {
		this.initState();
	},
	data() {
		return {
			answer: [],
		};
	},

	methods: {
		initState() {
			if (this.explain) {
				if (this.data.questionAnswerContent) {
					this.answer = this.data.questionAnswerContent.studentAnswer;
				} else {
					this.filterRight();
				}
			} else {
				this.answer =
					JSON.parse(JSON.stringify(this.data.answer)) ||
					JSON.parse(JSON.stringify(this.data.content.sortList));
			}
		},
		filterRight() {
			this.data.questionAnswerContent = JSON.parse(JSON.stringify(this.data.questionContent));
			var sortList = JSON.parse(JSON.stringify(this.data.questionAnswerContent.sortList));

			sortList.sort(function (a, b) {
				var v1 = a.order;
				var v2 = b.order;
				if (v1 < v2) {
					return -1;
				} else if (v1 > v2) {
					return 1;
				} else {
					return 0;
				}
			});
			this.data.questionAnswerContent.answer = sortList;
			this.data.questionAnswerContent.studentAnswer = this.data.questionAnswerContent.sortList;
		},
		computeScore() {
			var score = 0;
			var content = JSON.parse(JSON.stringify(this.data.content));
			content.sortList.sort(function (a, b) {
				var v1 = a.order;
				var v2 = b.order;
				if (v1 < v2) {
					return -1;
				} else if (v1 > v2) {
					return 1;
				} else {
					return 0;
				}
			});

			var mark = this.answer.every((element, index) => {
				return element.sort === content.sortList[index].sort;
			});
			score = mark ? this.data.totalScore : 0;
			content.answer = content.sortList;
			content.studentAnswer = this.answer;
			content.score = score;
			content.finish = true;
			return { content, score };
		},
		changeValue(key) {
			var { content, score } = this.computeScore();
			console.log(score);
			this.$emit("changeValue", this.answer, content, score);
		},
	},
};
</script>

<style lang="scss">
.Sort-components {
	.draggable-crad {
		background-color: #f4f4f5;
		border-color: #e9e9eb;
		color: #333;
		margin-bottom: 10px;
		padding: 10px 10px;
		border-radius: 3px;
	}
}
</style>
